import React, { Component, lazy, Suspense } from 'react';
import { BrowserRouter, Route, Switch, RouteComponentProps } from 'react-router-dom';
import WLoading from 'components/loading/index'
import { StoreType } from 'store/types'
import { connect } from 'react-redux'
import { sessionLoginAction } from 'store/auth/actions'

const Web = lazy(() => import('./web'))
const Login = lazy(() => import('./login'))
const Admin = lazy(() => import('./admin'))

interface StateInterface { }

interface StorePopInterface {
}

interface PropsInterface extends Partial<RouteComponentProps> {
  sessionLoginAction?: () => Promise<any>
}

class App extends Component<PropsInterface, StateInterface> {

  componentDidMount() {
    // 进来后默认获取用户数据，判断是否登录
    this.props.sessionLoginAction!().catch(() => {})
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

    return (
      <BrowserRouter basename={process.env.REACT_APP_BASE_ROUTER_NAME}>
        <Suspense fallback={<WLoading height='100vh' />}>
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route path="/admin" component={Admin} />
            <Route component={Web} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    );
  }
}

const mapStateToProps = (state: StoreType) => {
  return {}
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    sessionLoginAction: () => dispatch(sessionLoginAction()),
  }
} 

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)
